<template>
  <div class="Registered">
    <!-- <el-row>吃剩的菜Registered</el-row> -->
    <div id="container">
      <h1 class="logo">Registered</h1>
      <div id="form-box">
        <i id="prev-btn" class="fas fa-arrow-left"></i>
        <i id="next-btn" class="fas fa-arrow-right"></i>
        <div id="input-group">
          <input type="text" id="input-field" required>
          <label id="input-label"></label>
          <div id="input-progress"></div>
        </div>
        <div id="progress-bar"></div>
      </div>
    </div>
  </div>
</template>

<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>

<script>
/**
 * 传值： 基本数据类型
 * 引用： 数组 和 对象
 * */
import common from "../../common/common.js";

// Questions Array
const questions = [
  { question: "Enter Your First Name" },
  { question: "Enter Your Last Name" },
  { question: "Enter Your Email", pattern: /\S+@\S+\.\S+/ },
  { question: "Create A Password", type: "password" }
];

// Transition Times
const shakeTime = 100; // Shake Transition Time
const switchTime = 200; // Transition Between Questions

// Init Position At First Question

export default {
  name: "Registered",
  props: {
    item: {
      title: String,
      closed: Boolean
    }
  },
  data() {
    return {
      formBox: null,
      nextBtn: null,
      prevBtn: null,
      inputGroup: null,
      inputField: null,
      inputLabel: null,
      inputProgress: null,
      progress: null,
      position: 0,
      userInfo: []
    };
  },
  created() {},
  mounted() {
    // Init DOM Elements
    this.formBox = document.querySelector("#form-box");
    this.nextBtn = document.querySelector("#next-btn");
    this.prevBtn = document.querySelector("#prev-btn");
    this.inputGroup = document.querySelector("#input-group");
    this.inputField = document.querySelector("#input-field");
    this.inputLabel = document.querySelector("#input-label");
    this.inputProgress = document.querySelector("#input-progress");
    this.progress = document.querySelector("#progress-bar");

    // Get Question On DOM Load
    // document.addEventListener("DOMContentLoaded", getQuestion);

    // Next Button Click
    this.nextBtn.addEventListener("click", this.validate);

    // Input Field Enter Click
    this.inputField.addEventListener("keyup", e => {
      if (e.keyCode == 13) {
        this.validate();
      }
    });
    this.getQuestion();
    // this.formComplete()
  },
  methods: {
    // Get Question From Array & Add To Markup
    getQuestion() {
      // Get Current Question
      this.inputLabel.innerHTML = questions[this.position].question;
      // Get Current Type
      this.inputField.type = questions[this.position].type || "text";
      // Get Current Answer
      this.inputField.value = questions[this.position].answer || "";
      // Focus On Element
      this.inputField.focus();

      // Set Progress Bar Width - Variable to the questions length
      this.progress.style.width =
        (this.position * 100) / questions.length + "%";

      // Add User Icon OR Back Arrow Depending On Question
      this.prevBtn.className = this.position
        ? "fas fa-arrow-left"
        : "fas fa-user";

      this.showQuestion();
    },

    // Display Question To User
    showQuestion() {
      this.inputGroup.style.opacity = 1;
      this.inputProgress.style.transition = "";
      this.inputProgress.style.width = "100%";
    },

    // Hide Question From User
    hideQuestion() {
      this.inputGroup.style.opacity = 0;
      this.inputLabel.style.marginLeft = 0;
      this.inputProgress.style.width = 0;
      this.inputProgress.style.transition = "none";
      this.inputGroup.style.border = null;
    },

    // Transform To Create Shake Motion
    transform(x, y) {
      this.formBox.style.transform = `translate(${x}px, ${y}px)`;
    },

    // Validate Field
    validate() {
      // Make Sure Pattern Matches If There Is One
      if (
        !this.inputField.value.match(questions[this.position].pattern || /.+/)
      ) {
        this.inputFail();
      } else {
        // console.log(this.inputField.value);
        // if (this.inputField.value.length > 0) {
        //   this.userInfo.add(this.inputField.value, this.position);
        // }
        this.inputPass();
      }
    },

    // Field Input Fail
    inputFail() {
      this.formBox.className = "error";
      // Repeat Shake Motion -  Set i to number of shakes
      for (let i = 0; i < 6; i++) {
        setTimeout(this.transform, shakeTime * i, ((i % 2) * 2 - 1) * 20, 0);
        setTimeout(this.transform, shakeTime * 6, 0, 0);
        this.inputField.focus();
      }
    },

    // Field Input Passed
    inputPass() {
      this.formBox.className = "";
      setTimeout(this.transform, shakeTime * 0, 0, 10);
      setTimeout(this.transform, shakeTime * 1, 0, 0);

      // Store Answer In Array
      questions[this.position].answer = this.inputField.value;

      // Increment this.position
      this.position++;

      // If New Question, Hide Current and Get Next
      if (questions[this.position]) {
        this.hideQuestion();
        this.getQuestion();
      } else {
        // Remove If No More Questions
        this.hideQuestion();
        this.formBox.className = "close";
        this.progress.style.width = "100%";

        // Form Complete
        this.formComplete();
      }
    },

    // All Fields Complete - Show h1 end
    formComplete() {
        console.log(questions)
      const h1 = document.createElement("h1");
      h1.classList.add("end");
      h1.appendChild(
        document.createTextNode(
          `Thanks ${
            questions[0].answer
          } You are registered and will get an email shortly`
        )
      );
      setTimeout(() => {
        this.formBox.parentElement.appendChild(h1);
        setTimeout(() => (h1.style.opacity = 1), 50);
      }, 1000);
    }
  },

  filters: {},
  // 输入框的  监听方法
  watch: {}
};
</script>

<style scoped>
.Registered {
  height: 66vh;
}

@import url("https://fonts.googleapis.com/css?family=Pacifico|Roboto");
h1.logo {
  color: #36ccd0;
  font-family: "Pacifico", cursive;
  font-size: 4em;
}

h1.end {
  position: relative;
  color: #fff;
  opacity: 0;
  transition: 0.8s ease-in-out;
}

#container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
}

#form-box {
  background: #fff;
  position: relative;
  width: 600px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.1),
    0 6px 10px 5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease-in-out;
}

#form-box.close {
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: 0.8s ease-in-out;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0);
}

#next-btn {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 40px;
  color: #428bca;
  float: right;
  cursor: pointer;
  z-index: 2;
}
#next-btn:hover {
  color: #b9d4ec;
}

#prev-btn {
  position: absolute;
  font-size: 18px;
  left: 30px;
  top: 12px;
  z-index: 2;
  color: #9e9e9e;
  float: right;
  cursor: pointer;
}
#prev-btn:hover {
  color: #b9d4ec;
}

#input-group {
  position: relative;
  padding: 30px 20px 20px 20px;
  margin: 10px 60px 10px 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#input-group input {
  position: relative;
  width: 100%;
  border: none;
  font-size: 20px;
  font-weight: bold;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
#input-group #input-label {
  position: absolute;
  pointer-events: none;
  top: 32px;
  left: 20px;
  font-size: 20px;
  font-weight: bold;
  transition: 0.2s ease-in-out;
}
#input-group input:valid + #input-label {
  top: 6px;
  left: 42px;
  margin-left: 0 !important;
  font-size: 11px;
  font-weight: normal;
  color: #9e9e9e;
}

#input-progress {
  border-bottom: 3px solid #428bca;
  width: 0;
  transition: width 0.6s ease-in-out;
}

#progress-bar {
  position: absolute;
  background: #b9d4ec;
  height: 10px;
  width: 0;
  transition: width 0.5s ease-in-out;
}

.close #next-btn,
.close #prev-btn {
  color: #fff;
}

.error #input-progress {
  border-color: #ff2d26;
}

.error #next-btn {
  color: #ff2d26;
}

@media (max-width: 600px) {
  #form-box {
    width: 80%;
  }
}
</style>

